<script setup>
import { useRouter } from "vue-router";
import DefaultRoutes from "@/config/routes";
import { computed, ref } from "vue";

const router = useRouter();
// 当前一级路径
const curFirstPath = computed(
  () => router.currentRoute.value.path.split("/")[1]
);
// console.log(router.currentRoute.value.path.split('/'))
</script>

<template>
  <div class="maxMenuBox">
    <div class="imgAndWebName">
      <img src="../assets/images/school-logo.png" class="logo" />
      <span class="webName">信息工程系本科生教学实践平台</span>
    </div>
    <div class="menuBox">
      <ul class="firtNavBox">
        <li
          class="firstlist"
          v-for="routeItem in DefaultRoutes"
          :key="routeItem.id"
          :class="{ active: routeItem.path === '/' + curFirstPath }"
          @click="router.push(routeItem.path)"
        >
          <a class="firstListHref">{{ routeItem.title }}</a>
          <ul class="secondNavBox" v-if="routeItem.children">
            <!--      防止冒泡到父级路由      -->
            <li
              class="droplist"
              v-for="(subRouteItem, idx) in routeItem.children"
              :key="idx"
              @click.stop="router.push(routeItem.path + subRouteItem.path)"
            >
              <a>{{ subRouteItem.title }}</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>
<style scoped lang="less">
.maxMenuBox {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 60px;
  box-shadow: 2px 2px 10px rgb(186, 184, 184);
  border-radius: 0px 0px 10px 10px;
  position: relative;
  z-index: 100;
}

.imgAndWebName {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20px 40px;
  background-color: #0d7f99;
  border-radius: 0px 0px 0px 10px;
}

.logo {
  width: 65px;
  height: 65px;
  margin-bottom: 20px;
  border-radius: 50%;
  border: 2px solid white;
}

.webName {
  font-size: 26px;
  font-family: "Courier New", Courier, monospace;
  font-weight: bold;
  color: white;
  margin-left: 20px;
}

.menuBox {
  flex:1;
  display: flex;
  flex-direction: row;
  align-items: center;
  // justify-content: center;
  margin-left: 5%;
}

.firstlist {
  list-style: none;
  float: left;
  width: 80px;
  height: 50px;
  margin-right: 20px;
  font-size: 16px;
}

.firstlist:hover {
  background-color: aliceblue;
  transition: transform 0.3s ease-in;
}

.firstlist a {
  text-decoration: none;
  display: block;
  text-align: center;
  line-height: 50px;
  color: black;
  text-transform: uppercase;
  position: relative;
  cursor: pointer;
}

.secondNavBox {
  width: 120px;
  height: auto;
  background-color: rgba(255, 255, 255, 0.8);
}

.droplist {
  width: 120px;
  list-style: none;
  display: none;
  height: 50px;
}

.droplist:hover {
  background-color: aliceblue;
}

.menuBox ul li:hover ul li {
  display: block;
  border-top: 1px solid rgb(239, 238, 238);
}

/* 鼠标滑过效果 */
.firstListHref:before {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 0;
  height: 3px;
  width: 100%;
  background: #1e9ab5;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.2s ease;
}

.firstListHref:hover:before {
  transform: scaleX(1);
  transform-origin: left;
}

.active {
  /* border-bottom: 3px solid #2ed6c8;
  height:42px; */
  background-color: aliceblue;
}
</style>
